<template>
  <view class="page flex-col">
    <view class="header">
      <view class="title-bar flex-row justify-between">
        <image class="back-icon" src="/static/jiaya/back.png" />
        <text class="title">证件核验</text>
      </view>
    </view>

    <view class="content">
      <up-tabs
        class="up-tabs-content"
        :list="tabsData"
        @click="onTabClick"
        :lineWidth="lineWidth"
        lineColor="#2877FF"
        :activeStyle="activeTabStyle"
        :inactiveStyle="inactiveTabStyle"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
      />
      <view class="form">
        <view class="form-item flex-row justify-between">
          <text class="label">车牌号码</text>
          <text class="value">鄂H0T379</text>
        </view>
        <view class="divider"></view>
        <u-form-item prop="plateColor">
          <text class="label">车牌号码</text>
          <dynamic-inputs
            :inputConfigs="inputConfigs1"
            @input-change="handlePlateColorChange"
          ></dynamic-inputs>
        </u-form-item>
      </view>
      <view class="search-button">
        <text>立即查询</text>
      </view>

      <view class="result-list">
        <view class="result-item" v-for="(item, index) in resultList" :key="index">
          <view class="item-header flex-row justify-between">
            <view class="flex-row">
              <image class="item-icon" src="/static/jiaya/car-icon.png" />
              <text class="item-title">车牌号码：{{ item.plateNumber }}</text>
            </view>
            <image class="arrow-right" src="/static/jiaya/arrow-right.png" />
          </view>
          <view class="divider"></view>
          <text class="item-subtitle">道路运输证号：{{ item.licenseNumber }}</text>
        </view>
      </view>

      <view class="load-more-wrapper">
        <view class="load-more">
          <text>加载更多</text>
        </view>
      </view>
    </view>

    <tab-bar :currentPage="currentPage"></tab-bar>
  </view>
</template>

<script>
import tabBar from "../tabbar/tabbar.vue";
import dynamicInputs from "@/components/area-pickerselect/dynamicInputs.vue";

export default {
  components: {
    tabBar,
    dynamicInputs,
  },
  data() {
    return {
      currentPage: 1,
      resultList: [
        { plateNumber: '鄂H0T379', licenseNumber: '荆门420881206832' },
        { plateNumber: '鄂H0T379', licenseNumber: '荆门420881206832' },
        { plateNumber: '鄂H0T379', licenseNumber: '荆门420881206832' },
        { plateNumber: '鄂H0T379', licenseNumber: '荆门420881206832' },
      ],
      inputConfigs1: [
        {
          functionName: "changePlatecolor",
          placeholder: "车牌颜色",
        },
      ],
      tabsData: [
        { name: '营运车辆' },
        { name: '经营业户' },
        { name: '从业人员' },
      ],
      lineWidth: 20,
      activeTabStyle: {
        color: '#2877FF',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      },
      inactiveTabStyle: {
        color: '#0d1444',
        transform: 'scale(1)'
      },
      plateColorConfig: [
        {
          label: '车牌颜色',
          type: 'select',
          value: '黄色',
          options: [
            { label: '黄色', value: '黄色' },
            { label: '蓝色', value: '蓝色' },
            { label: '绿色', value: '绿色' },
            // 添加更多颜色选项...
          ],
        },
      ],
    };
  },
  mounted() {
    uni.hideTabBar();
  },
  methods: {
    onTabClick(item) {
      console.log('Clicked tab:', item.name);
      // 在这里处理标签点击事件
    },
    handlePlateColorChange(value) {
      console.log('Selected plate color:', value);
      // 在这里处理车牌颜色变化
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f3f6fa;
  min-height: 100vh;
}

.header {
  background-color: #2877ff;
  padding: 44px 10px 13px; // 增加顶部内边距，补偿移除的状态栏空间

  .title-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .back-icon {
      position: absolute;
      left: 0;
      width: 16px;
      height: 16px;
    }

    .title {
      color: #fff;
      font-size: 19px;
      font-weight: 500;
    }
  }
}

.content {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 100px); // 调整这个值以适应您的页面布局

  .up-tabs-content {
    background-color: #fff;
    border-radius: 4px;
    margin-top: 10px;
  }

  .form {
    background-color: #fff;
    border-radius: 4px;
    padding: 16px 10px;
    margin-top: 10px;

    .form-item {
      .label {
        color: #0d1444;
        font-size: 16px;
      }

      .value, .value-wrapper {
        color: #0d1444;
        font-size: 16px;
      }

      .arrow-icon {
        width: 16px;
        height: 16px;
        margin-left: 5px;
      }
    }

    .divider {
      height: 1px;
      background-color: #f1f1f1;
      margin: 16px 0;
    }
  }

  .search-button {
    background-color: #2877ff;
    border-radius: 4px;
    padding: 11px 0;
    text-align: center;
    margin-top: 30px;

    text {
      color: #fff;
      font-size: 16px;
    }
  }

  .result-list {
    flex: 1;
    overflow-y: auto;

    .result-item {
      background-color: #fff;
      border-radius: 4px;
      padding: 16px 10px;
      margin-bottom: 10px;

      .item-header {
        .item-icon {
          width: 24px;
          height: 24px;
          margin-right: 5px;
        }

        .item-title {
          font-size: 18px;
          color: #333;
        }

        .arrow-right {
          width: 16px;
          height: 16px;
        }
      }

      .divider {
        height: 1px;
        background-color: #f1f1f1;
        margin: 8px 0;
      }

      .item-subtitle {
        font-size: 12px;
        color: #79829c;
      }
    }
  }

  .load-more-wrapper {
    padding: 20px 0;
  }

  .load-more {
    background-color: #2877ff;
    border-radius: 4px;
    padding: 11px 0;
    text-align: center;

    text {
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
